<script setup>
import VideoCategoryApi from "@/api/VideoCategoryApi.js";
import {onMounted, reactive} from "vue";
import {useRouter} from "vue-router";
import {useSystemSettingStore} from "@/store/index.js";
const {setting,setCurrentSideBarActive} = useSystemSettingStore()
const router = useRouter()
const state = reactive({
  parentCategoryList:[],
  activePathId:"index",
})
const routerPush=(path)=>{
  if (path=='/index' || path=='/'){
    router.push("/")
    setCurrentSideBarActive('index')
  }else {
    router.push({path:`/channel/`+path})
    setCurrentSideBarActive(path)
  }

}
const getParentCategoryList = ()=>{
  VideoCategoryApi.getAllParentCategoryList().then(res=>{
    state.parentCategoryList = res.data
  })
}
onMounted(()=>{
  getParentCategoryList()
  initActive()

})
//初始化当前path
const initActive = ()=>{
  if (router.currentRoute.value.path==='/index' ||router.currentRoute.value.path==='/'){
    state.activePathId = "index"
  }else {
    state.activePathId = router.currentRoute.value.params.id
  }
}


const clickNav = (path,activeId)=>{
  console.log("clickNav")
  console.log(path)
  routerPush(path)
}
</script>

<template>
  <el-container style="margin: 0;padding: 0">

    <el-aside class="left-nav-wrap" width="140px">
      <ul class="nav-box">
        <li @click="clickNav('/index','index')"  :class="setting.currentSideBarActive=='index'?'nav-item active':'nav-item'"> 首页</li>
        <li @click="clickNav(category.categoryId,category.categoryId)"
                     :class="setting.currentSideBarActive==category.categoryId+''?'nav-item active':'nav-item'"
                     v-for="category in state.parentCategoryList" :key="category.categoryId">
          {{category.categoryName}}
        </li>
      </ul>
    </el-aside>
    <el-container>
      <el-main style="--el-main-padding: 0" class="index-main">
        <router-view/>
      </el-main>
    </el-container>
  </el-container>
</template>



<style scoped lang="less">

.left-nav-wrap {
  display: flex;
  justify-content: center;
  padding-top: 80px;
  color: white;
  position: fixed;
  left: 0;
  top: 0;
  height: 100vh;
  //background-image: linear-gradient(-90deg, rgba(20, 20, 20, 0) 1%, rgba(20, 20, 20, .6) 99%);
  background-color: #141414;
  .nav-box{
    height: calc(100vh - 80px);
    overflow-y: scroll;
    width: 100%;
    direction: rtl;
    scrollbar-width: none;
    .nav-item{
      display: flex;
      flex-direction: row;
      justify-content: center;
      align-items: center;
      margin-bottom: 10px;
      padding: 10px 0;
      color: rgba(255,255,255,.6);
      letter-spacing: 2px;
      transition: all ease-in-out .4s;
      cursor: pointer;
    }
    .nav-item:hover{
      color: white;
      font-weight: 600;
    }

  }
  .active{
    color:#00d1d1!important;
    font-weight: 600;
  }

}

.index-main {
  position: fixed;
  width: calc(100vw - 140px);
  padding: 0 20px 0 0;
  left: 140px;
  height: 100vh;
  background-color: @backgroundColor-black;
  z-index: 12;
  overflow-y: scroll;
  scrollbar-width: none;
}
.route-link-active{
  color:#00d1d1!important;
  font-weight: 600!important;
}

</style>